<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/webjars/bootstrap/3.3.7/css/bootstrap.css">
  <script src="/webjars/jquery/3.4.1/jquery.js" type="text/javascript"></script>
  <script type="text/javascript" src="/webjars/bootstrap/3.3.7/js/bootstrap.js"></script>
  <script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
  <script src="/webjars/axios/0.19.0/dist/axios.js" type="text/javascript"></script>
</head>
<body>
  <div id="vuebox">
    <input type="hidden" id="id" th:value="${ids}">
    <div class="container" style="margin-top: 50px">
      <table class="table table-striped">
        <h3 class="text-center">回复信息列表</h3>
        <thead>

        <p class="text-right">
          <a href="#" class="btn btn-danger" @click.stop="addhuifu">添加回复</a>
          <a href="#" @click.stop="backs()" class="btn btn-danger">返回帖子列表</a>
        </p>

        <tr>
          <th>回复内容</th>
          <th>回复昵称</th>
          <th>发布时间</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in seleReps.list">
          <td>{{item.content}}</td>
          <td>{{item.author}}</td>
          <td>{{item.createdate}}</td>


        </tr>
        </tbody>
      </table>
      <br/>
      <div class="text-right">
        <ul class="pagination">
          <li v-show="seleReps.hasPreviousPage">
            <a href="#" @click.stop="selectEntry(seleReps.prePage)">&laquo;</a>
          </li>
          <li :class="{active:seleReps.pageNum==i}" v-for="i in seleReps.navigatepageNums">
            <a href="#" @click.stop="selectEntry(i)">{{i}}</a>
          </li>
          <li v-show="seleReps.hasNextPage">
            <a href="#" @click.stop="selectEntry(seleReps.nextPage)">&raquo;</a>
          </li>
        </ul>
      </div>
    </div>

    <!--模态框-->
    <div class="modal" id="mymodal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button class="close" @click="hideModal" type="button">&times;</button>
            <div class="modal-title">
              <p>添加帖子回复</p>
            </div>
          </div>
          <div class="modal-body">
            <form class="form-horizontal" role="form">
              <div class="form-group">
                <label for="summary" class="col-sm-2 control-label">回复内容:</label>
                <div class="col-sm-10">
                  <!--<textarea v-model="rep.content" id="summary" class="form-control"/>-->
                  <input v-model="rep_add.content" id="summary" type="text" class="form-control" placeholder="请输入图书摘要"/>
                </div>
              </div>
              <div class="form-group">
                <label for="huifu" class="col-sm-2 control-label">回复昵称:</label>
                <div class="col-sm-10">
                  <!--<textarea v-model="rep.content" id="summary" class="form-control"/>-->
                  <input v-model="rep_add.author" id="huifu" type="text" class="form-control" placeholder="请输入图书摘要"/>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button class="btn btn-default" @click="hideModal()">关闭</button>
            <button class="btn btn-primary" @click="saveBook">添加</button>
          </div>
        </div>
      </div>
    </div>

  </div>
</body>
</html>
<script type="text/javascript">
  var paramss=new URLSearchParams();
  var id=$("#id").val();
  paramss.append('id',id);
        var vm=new Vue({
            el:"#vuebox",
            data:{
                seleReps:{},
                rep_add:{
                    invid:this.id,content:'',author:''
                },
                addRep:""
            },
            methods:{
                backs(){
                    window.location.href="index.html";
                },
                selectEntry:function (cid) {
                    axios.post("/seleRep",paramss,{params:{pageNum:cid}}).then(res=>{
                        this.seleReps=res.data;
                    })
                },
                addhuifu:function () {
                    $("#mymodal").modal('show')
                },
                hideModal:function () {
                    $("#mymodal").modal('hide');
                },
                saveBook(){
                    axios.post("/saveRep",this.rep_add).then(res=>{
                        this.addRep=res.data;
                        if(this.addRep=="SUCCESS"){
                            this.selectEntry(1);
                        }else{
                            alert(this.deleResult.message)
                        }
                        this.hideModal();
                    })
                }
            },
            mounted(){
                this.selectEntry(1);
            }
    })
</script>